<div class="cil__base-block">
    <img class="cil__top-image" src="assets/images/centaur/change.svg"/>

    <div class="cil__base-block--form" *ngIf="addMinusService.validateForms.length === 0">
      <ng-container *ngIf="!pageService.isChannelAdd">
        <app-new-page-header
          [title]="'BIZ.ACQUIRER.OTHER.CHANNEL.CHANNEL_CONFIG' | i18n"
          [index]="-1"
          (addClick)="addMinusService.addItem($event)"
          (minusClick)="addMinusService.minusItem($event)"
        ></app-new-page-header>
      </ng-container>

      <ng-container *ngIf="pageService.isChannelAdd">
        <app-detail-header
          [title]="'BIZ.ACQUIRER.OTHER.CHANNEL.CHANNEL_CONFIG' | i18n"
          [ifEditable]="false"
        ></app-detail-header>
      </ng-container>
    </div>
    <nz-spin *ngIf="loading"></nz-spin>
    <ng-container *ngFor="let validateForm of addMinusService.validateForms; let i=index;">
      <form class="cil__base-block--form" [formGroup]="validateForm" nz-form>
        <ng-container *ngIf="!pageService.isChannelAdd">
          <app-new-page-header
            [title]="computeChannelSectionHeader(i)"
            [index]="i"
            (addClick)="addMinusService.addItem($event)"
            (minusClick)="addMinusService.minusItem($event)"
          ></app-new-page-header>
        </ng-container>

        <ng-container *ngIf="pageService.isChannelAdd">
          <app-detail-header
            [title]="'BIZ.ACQUIRER.OTHER.CHANNEL.CHANNEL_CONFIG' | i18n"
            [ifEditable]="false"
          ></app-detail-header>
        </ng-container>

        <div nz-row [nzGutter]="24">
          <ng-container *ngFor="let item of addMinusService.formItemsArr[i];" >
            <div nz-col [nzSpan]="(item.asyncSpan | async) || 12" style="min-height: 0;">
              <!-- 币种选择 -->
              <nz-form-item *ngIf="item.type === formItemType.CURRENCY_SELECT">
                <nz-form-label>{{item.label}}</nz-form-label>
                <nz-form-control>
                  <app-currency-select [disabled]="item.disable" [formControlName]="item.formControlName" [multiple]="true"></app-currency-select>
                  <nz-form-explain *ngIf="validateForm.get(item.formControlName).dirty">
                    <ng-container *ngIf="validateForm.get(item.formControlName).getError('required');else second">{{item.errTips && item.errTips['required']}}</ng-container>
                    <ng-template #second>
                      <ng-container *ngIf="validateForm.get(item.formControlName).getError('minlength');else third">{{item.errTips && item.errTips['minLength']}}</ng-container>
                    </ng-template>
                    <ng-template #third>
                      <ng-container *ngIf="validateForm.get(item.formControlName).getError('maxlength');else fourth">{{item.errTips && item.errTips['maxLength']}}</ng-container>
                    </ng-template>
                    <ng-template #fourth>
                      <ng-container *ngIf="validateForm.get(item.formControlName).getError('pattern'); else fifth">{{item.errTips && item.errTips['pattern']}}</ng-container>
                    </ng-template>
                    <ng-template #fifth>
                      <ng-container *ngIf="validateForm.get(item.formControlName).errors && item.errTip">{{item.errTip}}</ng-container>
                    </ng-template>
                  </nz-form-explain>
                </nz-form-control>
              </nz-form-item>

              <!-- 多选框 -->
              <nz-form-item *ngIf="item.type === formItemType.SELECT && !item.hide && !(item.asyncHidden | async)">
                <nz-form-label>{{item.label}}</nz-form-label>
                <nz-form-control>
                  <nz-select
                    [nzMaxTagCount]=5
                    [nzDisabled]="item.disable"
                    [compareWith]="item.compareFn"
                    [nzMode]="item.multiple || 'default'"
                    [formControlName]="item.formControlName"
                    [nzAllowClear]="item.allowClear"
                    name="item.formControlName"
                    (ngModelChange)="item.change && item.change($event, i)"
                  >
                    <nz-option
                      *ngFor="let op of item.options"
                      [nzLabel]="op.value || op.label"
                      [nzValue]="op.value"
                      nzCustomContent
                    >
                      <span>{{op.label}}</span>
                    </nz-option>
                  </nz-select>
                  <nz-form-explain *ngIf="validateForm.get(item.formControlName).dirty">
                    <ng-container *ngIf="validateForm.get(item.formControlName).getError('required');else second">{{item.errTips && item.errTips['required']}}</ng-container>
                    <ng-template #second>
                      <ng-container *ngIf="validateForm.get(item.formControlName).getError('minlength');else third">{{item.errTips && item.errTips['minLength']}}</ng-container>
                    </ng-template>
                    <ng-template #third>
                      <ng-container *ngIf="validateForm.get(item.formControlName).getError('maxlength');else fourth">{{item.errTips && item.errTips['maxLength']}}</ng-container>
                    </ng-template>
                    <ng-template #fourth>
                      <ng-container *ngIf="validateForm.get(item.formControlName).getError('pattern'); else fifth">{{item.errTips && item.errTips['pattern']}}</ng-container>
                    </ng-template>
                    <ng-template #fifth>
                      <ng-container *ngIf="validateForm.get(item.formControlName).errors && item.errTip">{{item.errTip}}</ng-container>
                    </ng-template>
                  </nz-form-explain>
                </nz-form-control>
              </nz-form-item>

              <!-- switch 开关-->
              <nz-form-item *ngIf="item.type === formItemType.SWITCH && !item.hide && !(item.asyncHidden | async)">
                <nz-form-label>{{item.label}}</nz-form-label>
                <nz-form-control>
                  <nz-switch [nzDisabled]="item.disable" [formControlName]="item.formControlName" (ngModelChange)="item.change($event)"></nz-switch>
                  <nz-form-explain *ngIf="validateForm.get(item.formControlName).dirty">
                    <ng-container *ngIf="validateForm.get(item.formControlName).getError('required');else second">{{item.errTips && item.errTips['required']}}</ng-container>
                    <ng-template #second>
                      <ng-container *ngIf="validateForm.get(item.formControlName).getError('minlength');else third">{{item.errTips && item.errTips['minLength']}}</ng-container>
                    </ng-template>
                    <ng-template #third>
                      <ng-container *ngIf="validateForm.get(item.formControlName).getError('maxlength');else fourth">{{item.errTips && item.errTips['maxLength']}}</ng-container>
                    </ng-template>
                    <ng-template #fourth>
                      <ng-container *ngIf="validateForm.get(item.formControlName).getError('pattern'); else fifth">{{item.errTips && item.errTips['pattern']}}</ng-container>
                    </ng-template>
                    <ng-template #fifth>
                      <ng-container *ngIf="validateForm.get(item.formControlName).errors && item.errTip">{{item.errTip}}</ng-container>
                    </ng-template>
                  </nz-form-explain>
                </nz-form-control>
              </nz-form-item>

              <!-- 文件上传 -->
              <nz-form-item *ngIf="item.type === formItemType.FILE && !item.hide && !(item.asyncHidden | async)">
                <nz-form-label>{{item.label}}</nz-form-label>
                <nz-form-control nzHasFeedback="true">
                  <app-new-upload-file [disable]="item.disable" [(content)]="validateForm.get(item.formControlName).value"></app-new-upload-file>
                  <nz-form-explain *ngIf="validateForm.get(item.formControlName).dirty && validateForm.get(item.formControlName).errors">
                    <ng-container>{{item.errTip}}</ng-container>
                  </nz-form-explain>
                </nz-form-control>
              </nz-form-item>

              <!-- RADIO -->
              <nz-form-item *ngIf="item.type === formItemType.RADIO && !item.hide && !(item.asyncHidden | async)">
                <nz-form-label>{{item.label}}</nz-form-label>
                <nz-form-control>
                  <nz-radio-group [nzDisabled]="item.disable" [formControlName]="item.formControlName">
                    <label nz-radio *ngFor="let op of item.options" [nzValue]="op.value">{{op.label}}</label>
                  </nz-radio-group>
                </nz-form-control>
              </nz-form-item>

              <!-- input group -->
              <nz-form-item *ngIf="item.type === formItemType.INPUTGROUP && !item.hide && !(item.asyncHidden | async)">
                <nz-form-label>{{item.label}}</nz-form-label>
                <nz-form-control>
                  <app-custom-input type="number" precision="2" [disabled]="item.disable" [addOnAfter]="item.addAfter" [formControlName]="item.formControlName" ></app-custom-input>
                  <nz-form-explain *ngIf="validateForm.get(item.formControlName).dirty">
                    <ng-container *ngIf="validateForm.get(item.formControlName).getError('required');else second">{{item.errTips && item.errTips['required']}}</ng-container>
                    <ng-template #second>
                      <ng-container *ngIf="validateForm.get(item.formControlName).getError('minlength');else third">{{item.errTips && item.errTips['minLength']}}</ng-container>
                    </ng-template>
                    <ng-template #third>
                      <ng-container *ngIf="validateForm.get(item.formControlName).getError('maxlength');else fourth">{{item.errTips && item.errTips['maxLength']}}</ng-container>
                    </ng-template>
                    <ng-template #fourth>
                      <ng-container *ngIf="validateForm.get(item.formControlName).getError('pattern'); else fifth">{{item.errTips && item.errTips['pattern']}}</ng-container>
                    </ng-template>
                    <ng-template #fifth>
                      <ng-container *ngIf="validateForm.get(item.formControlName).errors && item.errTip">{{item.errTip}}</ng-container>
                    </ng-template>
                  </nz-form-explain>
                </nz-form-control>
              </nz-form-item>

              <!-- input -->
              <nz-form-item *ngIf="!item.type && !item.hide && !(item.asyncHidden | async)">
                <nz-form-label>{{item.label}}</nz-form-label>
                <nz-form-control nzHasFeedback="true">
                  <input nz-input [attr.disabled]="item.disable" [type]="item.inputType" [formControlName]="item.formControlName" [name]="item.formControlName" (blur)="item.change ? item.change($event, i) : null" />
                  <nz-form-explain *ngIf="validateForm.get(item.formControlName).dirty">
                    <ng-container *ngIf="validateForm.get(item.formControlName).getError('required');else second">{{item.errTips && item.errTips['required']}}</ng-container>
                    <ng-template #second>
                      <ng-container *ngIf="validateForm.get(item.formControlName).getError('minlength');else third">{{item.errTips && item.errTips['minLength']}}</ng-container>
                    </ng-template>
                    <ng-template #third>
                      <ng-container *ngIf="validateForm.get(item.formControlName).getError('maxlength');else fourth">{{item.errTips && item.errTips['maxLength']}}</ng-container>
                    </ng-template>
                    <ng-template #fourth>
                      <ng-container *ngIf="validateForm.get(item.formControlName).getError('pattern'); else fifth">{{item.errTips && item.errTips['pattern']}}</ng-container>
                    </ng-template>
                    <ng-template #fifth>
                      <ng-container *ngIf="validateForm.get(item.formControlName).getError('existed'); else sixth">{{item.errTips && item.errTips['existed']}}</ng-container>
                    </ng-template>
                    <ng-template #sixth>
                      <ng-container *ngIf="validateForm.get(item.formControlName).errors && item.errTip">{{item.errTip}}</ng-container>
                    </ng-template>
                  </nz-form-explain>
                </nz-form-control>
              </nz-form-item>

              <!-- input number -->
              <nz-form-item  *ngIf="item.type === formItemType.INPUTNUMBER && !item.hide && !(item.asyncHidden | async)">
                <nz-form-label>{{item.label}}</nz-form-label>
                <nz-form-control nzHasFeedback="true">
                  <app-custom-input type="number" precision="0"   [formControlName]="item.formControlName" (blur)="item.change ? item.change($event, i) : null"></app-custom-input>
                  <nz-form-explain *ngIf="validateForm.get(item.formControlName).dirty">
                    <ng-container *ngIf="validateForm.get(item.formControlName).getError('required');else second">{{item.errTips && item.errTips['required']}}</ng-container>
                    <ng-template #second>
                      <ng-container *ngIf="validateForm.get(item.formControlName).getError('minlength');else third">{{item.errTips && item.errTips['minLength']}}</ng-container>
                    </ng-template>
                    <ng-template #third>
                      <ng-container *ngIf="validateForm.get(item.formControlName).getError('maxlength');else fourth">{{item.errTips && item.errTips['maxLength']}}</ng-container>
                    </ng-template>
                    <ng-template #fourth>
                      <ng-container *ngIf="validateForm.get(item.formControlName).getError('pattern'); else fifth">{{item.errTips && item.errTips['pattern']}}</ng-container>
                    </ng-template>
                    <ng-template #fifth>
                      <ng-container *ngIf="validateForm.get(item.formControlName).getError('existed'); else sixth">{{item.errTips && item.errTips['existed']}}</ng-container>
                    </ng-template>
                    <ng-template #sixth>
                      <ng-container *ngIf="validateForm.get(item.formControlName).errors && item.errTip">{{item.errTip}}</ng-container>
                    </ng-template>
                  </nz-form-explain>
                </nz-form-control>
              </nz-form-item>
  
            </div>
          </ng-container>
        </div>
      </form>
    </ng-container>
  </div>
